package top.mcwebsite.playandroid.business.tixi.impl.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import top.mcwebsite.lib.route.api.EasyRouter
import top.mcwebsite.lib.router.annotation.Route
import top.mcwebsite.playandroid.business.tixi.impl.model.TixiModel
import top.mcwebsite.playandroid.business.tixi.impl.vm.TixiIntent
import top.mcwebsite.playandroid.business.tixi.impl.vm.TixiUiEffect
import top.mcwebsite.playandroid.business.tixi.impl.vm.TixiViewModel
import top.mcwebsite.playandroid.common.anim.JumpBall
import top.mcwebsite.playandroid.common.constant.RouteConfig
import top.mcwebsite.playandroid.common.constant.RouteConfig.ArticleList
import top.mcwebsite.playandroid.common.flex.SimpleFlexRow
import top.mcwebsite.playandroid.common.uiWidget.DefaultLoadingMore
import top.mcwebsite.playandroid.lib.mvi.model.Async

@Route(RouteConfig.TiXi.PATH)
@Composable
fun TixiPage() {
    val viewModel: TixiViewModel = viewModel()
    val uiState by viewModel.uiStateFlow.collectAsState()
    viewModel.HandleUiEffect {
        when (it) {
            is TixiUiEffect.GoArticleListUiEffect -> {
                EasyRouter.navigate("${ArticleList.PATH}?${ArticleList.Param.CID}=${it.tixiModel.id}&${ArticleList.Param.TITLE}=${it.tixiModel.name}")
            }
        }
    }
    when (val tixiData = uiState.tixiModels) {
        is Async.Success -> {
            TixiPageContent(tixiModels = tixiData.data, viewModel = viewModel)
        }

        is Async.UnInitialization -> {
        }

        is Async.Failed -> {

        }

        is Async.Loading -> {
            Box(modifier = Modifier.fillMaxSize()) {
                JumpBall(modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

@Composable
fun TixiPageContent(
    tixiModels: List<TixiModel>,
    viewModel: TixiViewModel,
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        tixiModels.forEach {
            item {
                TixiItem(tixiModel = it) {
                    viewModel.sendIntent(TixiIntent.OnTixiItemClickIntent(it))
                }
            }
        }
    }
}

@Composable
fun TixiItem(
    tixiModel: TixiModel,
    onItemClick: (TixiModel) -> Unit,
) {
    Column(
        modifier = Modifier.padding(horizontal = 12.dp, vertical = 5.dp)
    ) {
        Text(
            text = tixiModel.name,
            style = MaterialTheme.typography.titleMedium,
            modifier = Modifier.padding(vertical = 5.dp)
        )
        SimpleFlexRow(space = 5.dp) {
            tixiModel.children.forEach {
                Box(
                    modifier = Modifier
                        .background(
                            color = MaterialTheme.colorScheme.surfaceVariant,
                            shape = RoundedCornerShape(25.dp)
                        )
                        .clickable {
                            onItemClick(it)
                        }
                ) {
                    Text(
                        text = it.name,
                        modifier = Modifier.padding(horizontal = 10.dp, vertical = 5.dp),
                        style = MaterialTheme.typography.labelMedium
                    )
                }
            }
        }
    }
}